<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
  <title>Side</title>

  <style>
    .aside {
      background-color: aliceblue;
      padding: 20px;
      position: fixed;
      top: 80px;
      /* 如果 header 高度不同，需要相应调整 top 值 */
      left: 0;
      height: calc(100vh - 80px);
      width: 210px;
      /* 计算 aside 的高度 */
    }

    .aside .menu {
      background-color: rgb(116, 206, 207);
      border-radius: 5px;
      height: calc(100vh - 120px);
    }

    .menu .user-container {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px 10px 0 0;
      width: 100%;
      background-color: rgb(116, 206, 207);
      height: 200px;
      border-bottom: 1px solid #f0eded;
    }

    .menu .user {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .user span {
      font-weight: bolder;
    }

    .tab {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .menu a {
      display: flex;
      padding: 15px;
      text-decoration: none;
      color: aliceblue;
      background-color: rgb(116, 206, 207);
      align-items: center;
      justify-content: space-between;
    }

    .arrow {
      width: 20px; /* 设置箭头图片的宽度 */
      height: auto; /* 自适应高度 */
    }

    .menu a:hover {
      cursor: pointer;
      background-color: rgb(7, 207, 210);
    }

    #current a {
      background-color: rgb(5, 163, 166);
    }

    #current .arrow {
      display: block;
    }

    .arrow {
      display: none;
    }

    .main {
      position: fixed;
      top: 80px;
      left: 250px;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      background-color: aliceblue;
      padding: 20px;
      z-index: 1;
      /* 只有内容溢出时才会显示垂直滚动条 */
    }

    #mainFrame {
      width: 100%;
      height: 100%;
      border: none;
    }

    #message {
      position: fixed;
      top: 80px;
      left: 250px;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      background-color: aliceblue;
      padding: 20px;
      /* 只有内容溢出时才会显示垂直滚动条 */
    }

    #message {
      display: none;
    }
  </style>
</head>
<body>
<div class="aside">
  <div class="menu">
    <div class="user-container">
      <div class="user">
        <img src="${user_key.avatar}" style="width: 50px;border-radius:50%;margin-bottom: 10px">
        <span>${user_key.nickname}</span>
      </div>
    </div>
    <ul class="tab">
      <li class="tab-item" onclick="showPage('course')">
        <a href="javascript:void(0)" id="course">
          <span>课程</span>
          <img src="assets/images/箭头.png" alt="arrow" class="arrow">
        </a>
      </li>
      <li class="tab-item" onclick="showPage('note')">
        <a href="javascript:void(0)" id="note">
          <span>笔记</span>
          <img src="assets/images/箭头.png" alt="arrow" class="arrow">
        </a>
      </li>
      <li class="tab-item" onclick="showPage('mailbox')">
        <a href="javascript:void(0)" id="mailbox">
          <span>收件箱</span>
          <img src="assets/images/箭头.png" alt="arrow" class="arrow">
        </a>
      </li>
      <li class="tab-item" onclick="showPage('charts')">
        <a href="javascript:void(0)" id="charts">
          <span>排行榜</span>
          <img src="assets/images/箭头.png" alt="arrow" class="arrow">
        </a>
      </li>
    </ul>
  </div>
</div>

<div class="main">
  <iframe id="mainFrame" src=""></iframe>
</div>

<div id="message">
  <%@ include file="message/Message.jsp" %>
</div>
<script>

  function showPage(url) {
    const mainFrame = document.getElementById('mainFrame')
    const list = document.getElementsByClassName('tab-item')
    const message = document.getElementById('message')
    message.style.display = 'none'
    for (let i = 0; i < list.length; i++) {
      list[i].id = ''
    }
    // 重置所有选项卡的 ID
    for (let i = 0; i < list.length; i++) {
      list[i].id = '';
    }

    // 切换当前选项卡的状态
    for (let i = 0; i < list.length; i++) {
      if (list[i].getAttribute('onclick').includes(url)) {
        list[i].id = 'current';
        break;
      }
    }

    switch (url) {
      case 'course':
        mainFrame.src = 'main/Course.jsp'
        break
      case 'note':
        mainFrame.src = 'main/Note.jsp'
        break
      case'mailbox':
        mainFrame.src = 'main/MailBox.jsp'
        break
      case 'charts':
        mainFrame.src = 'main/Charts.jsp'
        break
      default:
        break
    }
  }

  /*
  var list = document.getElementsByClassName('tab-item')
  var message = document.getElementById('message')
  for (let i = 0; i < list.length; i++) {
    list[i].onclick = function () {
      for (let i = 0; i < list.length; i++) {
        list[i].id = ''
      }
      message.style.display = 'none'
      this.id = 'current'
    }
  }

   */
</script>
</body>
</html>
